<template>
    <div id="app">
        <div class="content">
            <transition :name="direction">
                <router-view></router-view>
            </transition>
        </div>
        <div class="footer-content">
            <FooterGuide/>
        </div>
    </div>
</template>
<script>
    import FooterGuide from '../components/FooterGuide/FooterGuide.vue';
    export default {
        data(){
            return{
                /*动画的过渡方向*/
                direction:''
            }
        },
        components:{
            FooterGuide
        },
        watch:{
            '$route'(to,source){
                // 首次涮新去掉动画
                if(source.fullPath === '/') return this.direction='';
                const route=['/home','/search','/order','/profile'];
                let toIndex=route.findIndex(item=>item===to.fullPath);
                let sourceIndex=route.findIndex(item=>item===source.fullPath);
                this.direction=toIndex>sourceIndex?'right-left':'left-right';
            }
        }
    }
</script>
<style lang="scss" scoped>
@import "../assets/style/rem.scss";
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5f5;
    overflow-x: hidden;
    .content{
        height: 93%;
        overflow: hidden;
    }
    .footer-content{
        overflow: hidden;
        height: 9%;
    }

    .left-right-enter-active,.right-left-enter-active,
    .left-right-leave-active,.right-left-leave-active{
        transition: all .3s ease;
        position: absolute;
        width:100%;
    }
    .left-right-enter,.right-left-leave-to{
        transform: translateX(-100%);
    }
    .left-right-leave-to,.right-left-enter{
        transform: translateX(100%);
    }
}


</style>
